import { Divider, Button, Popconfirm, Form, Input, message } from 'antd'
import React, { Component } from 'react'
import TableLayout from '@/layouts/TableLayout'
import router from 'umi/router'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import AuthButton from '@/components/AuthButton'
import ButtonHiddenWrapper from '@/components/ButtonHiddenWrapper'
import { connect } from 'dva'

@connect(({ baseTable }) => ({ selectedRows: baseTable.selectedRows }))
class Block extends Component {
  state = {
    tableRef: null
  }

  componentDidMount() {}

  render() {
    const renderActions = (_, record) => (
      <div>
        <Button
          type="link"
          className="edit hidden"
          onClick={() => router.push({pathname: "ROUTE_PATH/edit", state: record})}
        >
          编辑
        </Button>
        <Divider type="vertical" />
        <Popconfirm
          title="您确定要删除该xxxx吗?"
          onConfirm={() => {
            const { dispatch } = this.props
            if (dispatch) {
              dispatch({
                type: `${PAGE_NAME}/remove`,
                payload: { ids: record.id },
                callback: resp => {
                  console.log(resp)
                  const { tableRef } = this.state
                  tableRef.reload()
                },
              })
            }
          }}
          okText="是"
          cancelText="否"
        >
          <ButtonHiddenWrapper type="link" style={{ color: 'red' }} className="remove">
            删除
          </ButtonHiddenWrapper>
        </Popconfirm>
      </div>
    )

    const columns = [
      {
        title: 'xxxx名称',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '操作',
        key: 'actions',
        align: 'center',
        render: renderActions,
      },
    ]

    const searchComponents = [
      {
        name: 'name',
        label: '职务名称',
        comp: <Input placeholder="请输入职务名称" />,
      },
    ]

    const btns = [
      <>
        <Button
          className="add hidden"
          type="primary"
          onClick={() => {
            router.push(`ROUTE_PATH/add`)
          }}
        >
          添加
        </Button>
        <Divider type="vertical" className="add hidden" />
        <Button
          className="batchRemove hidden"
          type="danger"
          onClick={() => {
            const { selectedRows } = this.props
            console.log(selectedRows)
            if (selectedRows.length === 0) {
              message.error('请至少选择1条数据！')
            } else {
              const { dispatch } = this.props
              if (dispatch) {
                const keys = selectedRows.map(e => e.id)
                dispatch({
                  type: `PAGE_NAME/remove`,
                  payload: { ids: keys.join(',') },
                  callback: resp => {
                    console.log(resp)
                    const { tableRef } = this.state
                    tableRef.reload()
                  },
                })
              }
            }
          }}
        >
          批量删除
        </Button>
      </>,
    ]

    return (
      <PageHeaderWrapper title="职务管理">
      <TableLayout
          onRef={tableRef => this.setState({
            tableRef
          })}
          rowKey={record => record.id}
          columns={columns}
          listUrl={`/adminROUTE_PATH/list`}
          searchComponents={searchComponents}
          btns={btns}
        ></TableLayout>
      </PageHeaderWrapper>
    )
  }
}

export default Form.create()(AuthButton(Block))
